<template>
    <el-container>
        <el-aside width="13vw">
            <div class="logo">后台管理系统</div>
            <CMenu></CMenu>
        </el-aside>
        <el-container>
            <el-header><SysHeader @openAudio="openAudio"></SysHeader></el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <audio ref="neworderRef" src="@/assets/audio/neworder.mp3" preload="auto" style="display:none"></audio>
        <CDailog title="订单详情" :isShow="isShowDetail" @close="isShowDetail = false" :isShowEnter="false">
            <OrderDetail :id="detailid"></OrderDetail>
        </CDailog>
    </el-container>
</template>

<script>
import SysHeader from '@/components/sys/SysHeader';
import OrderDetail from '@/views/scx/oms/OrderDetail.vue';
import mqtt from 'mqtt';

export default {
    components: {
        SysHeader,
        OrderDetail
    },
    data(){
        return {
            isShowDetail: false,
            detailid: "",
            message: "",
            client: null,
            newaudio: null,
            isopenAudio: false
        }
    },
    created() {
        this.connectMQTT();
    },
    methods: {
        openAudio() {
            this.$refs.neworderRef.play();
            this.isopenAudio = true;
        },
        connectMQTT() {
            const options = {
                connectTimeout: 4000,
                clientId: 'ordermsg_wash',
                username: 'sub_guo',
                password: 'guoqiang',
                clean: true,
                protocolVersion: 4,
                protocolId: 'MQTT',
                rejectUnauthorized: false
            }
            this.client = mqtt.connect('ws://' + process.env.VUE_APP_MQTT_HOST, options);
 
            this.client.on('connect', () => {
                console.log("connect success");
                this.client.subscribe("order/#");
            });
        
            this.client.on('message', (topic, message) => {
                // 收到消息时更新数据
                this.message = JSON.parse(message.toString());
                this.newaudio = new Audio();
                this.$refs.neworderRef.currentTime = 0;
                this.$refs.neworderRef.play();
                console.log("message", this.message);
                this.$notify({
                    title: '新订单',
                    type: 'success',
                    dangerouslyUseHTMLString: true,
                    duration: 0,
                    message: '您有新的订单,请尽快处理。<br/>订单编号：' + this.message.orderno,
                    onClick: () => {
                        this.detailid = this.message.orderid;
                        this.isShowDetail = true;
                    }
                });
            });
        
            this.client.on('error', (error) => {
            });
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-header {
    height: 6vh !important;
}
::-webkit-scrollbar{display:none;}
.el-aside {
    background-color: rgb(84, 92, 100);
    height: 100vh;
    
    .logo {
        margin-left: 3vw;
        height: 8vh;
        line-height: 8vh;
        color: white;
    }
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    padding: 10px;
    height: 92vh;
}

</style>